<template>
  <el-dialog @close="reset" :title="cateData.id>0?'编辑':'新增'" :visible.sync="info.isShow">
    <el-form ref="cateForm" :model="cateData" :rules="rules" label-width="80px">
      <el-form-item label="上级分类" prop="pid">
        <el-select placeholder="请选择上级分类" v-model="cateData.pid">
          <el-option :value="0" label="顶级分类"></el-option>
          <el-option
            v-for="item in cateList"
            :key="item.id"
            :value="item.id"
            :label="item.catename"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="分类名称" prop="catename">
        <el-input
          placeholder="请输入分类名称"
          v-model="cateData.catename"
        ></el-input>
      </el-form-item>
      <el-form-item label="分类图片" prop="img" v-if="cateData.pid > 0">
        <!--
        action: 图片上传数据接口地址
        list-type: 图片上传组件的外观样式
        auto-upload: 是否执行自动上传
        on-change: 特殊的事件, 当用户选择图片的时候会自动调用
        file-list: 指定需要展示的图片列表
        limit: 最大允许上传个数
        on-exceed: 文件超出个数限制时的钩子
        -->
        <el-upload
          action="#"
          list-type="picture-card"
          :auto-upload="false"
          :on-change="imgChange"
          :file-list="imgList"
          :limit="1"
          :on-exceed="limitTips"
        >
          <i class="el-icon-plus"></i>
        </el-upload>
      </el-form-item>
      <el-form-item label="分类状态" prop="status">
        <el-radio-group v-model="cateData.status">
          <el-radio :label="1">正常</el-radio>
          <el-radio :label="2">禁用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="reset">取消</el-button>
      <el-button type="primary" @click="submit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
// 导入vuex辅助函数
import { mapState, mapActions } from "vuex";
export default {
  computed: {
    ...mapState("cate", ["cateList"]),
  },
  props: ["info"],
  data() {
    return {
      // 需要默认展示图片列表
      imgList: [],
      // 表单数据对象
      cateData: {
        pid: "",
        catename: "",
        img: null,
        status: "",
      },
      // 表单校验规则
      rules: {
        pid: { required: true, message: "请选择上级分类", trigger: "blur" },
        catename: {
          required: true,
          message: "请输入分类名称",
          trigger: "blur",
        },
        status: { required: true, message: "请选择分类状态", trigger: "blur" },
      },
    };
  },
  methods: {
    ...mapActions("cate", ["getCateListAction"]),
    //  上传图片数量超过上限的提示
    limitTips() {
      this.$message.warning("此处只能上传一张图片");
    },
    // 更新和表单绑定的数据对象
    setFormData(obj) {
      this.cateData = { ...obj };
      // 手动更新imgList
      if (obj.img !== "") {
        this.imgList = [{ url: this.$baseUrl + obj.img }];
      }
    },
    //  数据重置
    reset() {
      //  关闭对话框组件
      this.info.isShow = false;
      // 重置表单数据
      this.cateData = {
        id: "",
        pid: "",
        catename: "",
        img: null,
        status: "",
      };
    },
    //  提交表单
    submit() {
      this.$refs.cateForm.validate((valid) => {
        if (valid) {
          // this.cateData => FormData
          // 1-创建FormData实例对象
          const fd = new FormData();
          
          if(!this.cateData.id){
            // 删除多余参数
            delete this.cateData.id;
          }

          // 2-通过循环遍历将对象转换成FormData
          for (let key in this.cateData) {
            fd.append(key, this.cateData[key]);
          }
          const url = this.cateData.id > 0 ? "/cateedit" : "/cateadd";
          // 发送数据请求
          this.$axios.post(url, fd).then((res) => {
            if (res.code === 200) {
              // 成功提示
              this.$message.success(res.msg);
              // 更新分类列表
              this.getCateListAction();
              // 数据重置
              this.reset();
            }else{
              this.$message.error(res.msg);
            }
          });
        }
      });
    },
    // 监听用户选择图片的行为, file是系统自动注入的文件对象
    imgChange(file) {
      // 手动同步用户选择的图片数据
      this.cateData.img = file.raw;
    },
  },
};
</script>

<style>
</style>